<template>
	<view class="travel_page">
		<view class="pageTitle">
			<view></view>
			<view class="centerTitle">一日游</view>
			<image class="icon-36" src="../../static/images/icon/icon_search_black.png" mode="" @tap="goSearch"></image>
		</view>
		<view class="content">
			<view class="carousel_box">
				<Carousel :val="bannerObj" @swiperClick="swiperClick"></Carousel>
			</view>
			<view class="recommend_box">
				<view class="inner_left_recommend_box">
					<view class="inner_row_box" @tap="goBannerClassPage(0)">
						<view class="img_bg">
							<image :src="recommendList[0].image" mode="aspectFill"></image>
						</view>
						<!-- <view class="inner_row_box_title">{{ recommendList[0].name }}</view> -->
					</view>
					<view class="inner_row_box" @tap="goBannerClassPage(1)">
						<view class="img_bg">
							<image :src="recommendList[1].image" mode="aspectFill"></image>
						</view>
						<!-- <view class="inner_row_box_title">{{ recommendList[1].name }}</view> -->
					</view>
				</view>
				<view class="inner_right_recommend_box">
					<view class="inner_line_box" @tap="goBannerClassPage(2)">
						<view class="img_bg">
							<image :src="recommendList[2].image" mode="aspectFill"></image>
						</view>
						<!-- <view class="inner_line_box_title">{{ recommendList[2].name }}</view> -->
					</view>
					<view class="inner_line_box" @tap="goBannerClassPage(3)">
						<view class="img_bg">
							<image :src="recommendList[3].image" mode="aspectFill"></image>
						</view>
						<!-- <view class="inner_line_box_title">{{ recommendList[3].name }}</view> -->
					</view>
				</view>
			</view>
			<view class="area-title">发现</view>
			<view class="travel_list">
				<TourList :list="tourList.lists" @bookIn="bookIn"></TourList>
			</view>
		</view>
	</view>
</template>

<script>
	import Carousel from '../../components/carousel/Carousel.vue';
	import TourList from '../../components/tourList.vue';
	import com from '../../mixin/index.js';
	export default {
		mixins: [com],
		components: {
			Carousel,
			TourList
		},
		data() {
			return {
				bannerObj: {
					list: [],
					height: '270rpx',
					radius: '10rpx'
				},
				recommendList: [],
				tourList: {
					lists: [],
					total: 1,
					total_page: 0
				},
				page: {
					page: 1,
					page_size: 12
				}
			};
		},
		onLoad() {
			this.getTourRecommend();
			this.getTourList();
		},
		onPullDownRefresh() {
			this.tourList = {
					lists: [],
					total: 1,
					total_page: 0
				},
				this.page = {
					page: 1,
					page_size: 12
				}
			this.getTourList();
		},
		onReachBottom() {
			this.getTourList();
		},
		methods: {
			getTourRecommend() {
				this.$api.getTourRecommend().then(res => {
					console.log(res, '获取推荐模块');
					if (res.code == 1) {
						this.bannerObj.list = res.data.banner;
						console.log(this.bannerObj, 'sasa2121');
						this.recommendList = res.data.lists;
						uni.setStorageSync('travel_recommend_list', this.recommendList);
					}
				});
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/travel/travelSearchPage'
				});
			},
			getTourList() {
				this.getList('tourList', 'getTourList', 'page', {
					...this.page
				}).then(res => {
					uni.stopPullDownRefresh()
				});
			},
			goTourClassify(idx) {
				let cls = this.recommendList[idx];
				uni.navigateTo({
					url: `/pages/travel/classifyPage?clsObj=${JSON.stringify(cls)}`
				});
			},
			goBannerClassPage(idx) {
				uni.navigateTo({
					url: `/pages/bannerClassifyPage/travelClassPage?idx=${idx}&type=travel}`
				});
			},
			swiperClick(val) {
				let clickType = this.bannerObj.list[val];
				console.log(clickType, '点击你几个我爱唯欧你');
				switch (clickType.type) {
					case 'none':
						break;
					case 'team':
						uni.navigateTo({
							url: `/pages/shop/shopDetails?product_id=${clickType.third_id}`
						});
						break;
					case 'tour':
						uni.navigateTo({
							url: `/pages/travel/travelDetails?tour_id=${clickType.third_id}`
						});
						break;
				}
			},
			//预定
			bookIn(id) {
				this.$api.getTourDetail({
					tour_id: id
				}).then(res => {
					console.log(res, '获取当前详情');
				});
			}
		}
	};
</script>

<style lang="scss">
	.travel_page {
		background-color: #f9f9f9;

		.pageTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0rpx 35rpx 10rpx;
			margin-bottom: 20rpx;
			position: sticky;
			top: 0;
			left: 0;
			background-color: #f9f9f9;
			z-index: 99;

			.centerTitle {
				font-size: 34rpx;
				color: #333333;
			}
		}

		.content {
			padding: 0rpx 24rpx;
		}

		.carousel_box {
			margin-bottom: 30rpx;
		}

		.recommend_box {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.inner_left_recommend_box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.inner_row_box {
					width: 330rpx;
					height: 168rpx;
					box-sizing: border-box;
					position: relative;

					.img_bg {
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0;

						image {
							width: 330rpx;
							height: 168rpx;
							border-radius: 8rpx;
						}
					}

					.inner_row_box_title {
						position: absolute;
						z-index: 2;
						top: 20rpx;
						left: 37rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #ffffff;
					}
				}
			}

			.inner_right_recommend_box {
				flex: 1;
				display: flex;
				justify-content: space-between;

				.inner_line_box {
					width: 166rpx;
					height: 357rpx;
					position: relative;

					.img_bg {
						position: absolute;
						z-index: 1;
						top: 0;
						left: 0;

						image {
							width: 166rpx;
							height: 357rpx;
							border-radius: 8rpx;
						}
					}

					.inner_line_box_title {
						position: absolute;
						z-index: 2;
						top: 20rpx;
						left: 0;
						right: 0;
						text-align: center;
						font-size: 26rpx;
						font-weight: 500;
						color: #ffffff;
					}
				}
			}
		}

		.travel_list {}
	}
</style>